<template>

  <el-main style="height: 930px;">

    <div>
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="btn1"
        style="position: relative; left: -24%;"
        @click="showCreate">
        添加客户
      </el-button>

      <el-select v-model="value" placeholder="请选择想要查询的信息"
                 style="position: relative;left: 20%;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-input
        :placeholder="value===0?'请选择想要查找的信息':value===1?'请输入客户姓名':value===2?'请输入客户身份证':value===3?'请输入客户电话':'(⊙﹏⊙)'"
        v-model="target"
        clearable
        style="width: auto;left: 21%;position: relative;"
        @keyup.enter.native="getDetail(1, true)"
        @keyup.backspace.native="getAll(1)">
      </el-input>

      <el-button
        type="primary"
        icon="el-icon-search"
        class="btn1"
        style="position: relative;left:22%;"
        @click="getDetail(1, true)">
        搜索
      </el-button>
    </div>

    <div>
      <el-dialog title="修改客户资料" :visible.sync="editCustomerVisible" width="35%">
        <el-form :model="editCustomer">
          <el-form-item label="配送地址" :label-width="formLabelWidth">
            <label>{{ editCustomer.address }}</label>
          </el-form-item>
          <el-form-item label="配送地址" :label-width="formLabelWidth">
            <el-cascader
              placeholder="选择送货城市区县"
              :options="city"
              v-model="editAddress1"
              filterable
              style="width: 60%"></el-cascader>
            <el-input v-model="editAddress2" style="width: 39%"></el-input>
          </el-form-item>
          <el-form-item label="所属公司" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.employer" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.cardId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户手机号" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户座机" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.landline" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址邮编" :label-width="formLabelWidth">
            <el-input v-model="editCustomer.postalCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editCustomerVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCustomer">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="录入新客户" :visible.sync="createCustomerVisible" width="35%">
        <el-form :model="newCustomer">
          <el-form-item label="客户姓名" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.customerName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-cascader
              placeholder="选择送货城市区县"
              :options="city"
              v-model="address1"
              filterable
              style="width: 60%"></el-cascader>
            <el-input v-model="address2" style="width: 39%"></el-input>
          </el-form-item>
          <el-form-item label="所属公司" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.employer" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.cardId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户手机号" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户座机" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.landline" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址邮编" :label-width="formLabelWidth">
            <el-input v-model="newCustomer.postalCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="createCustomerVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCustomer">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-dialog :visible.sync="deleteCustomerVisible" width="30%">
      <h3>是否删除客户:{{ deleteCustomer.customerName }}</h3>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteCustomerVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteCustomerMethod">确定删除</el-button>
      </div>
    </el-dialog>

    <div>
      <el-dialog title="" :visible.sync="customerInfoVisible">
        <el-dialog
          width="870px"
          title="订单信息"
          :visible.sync="orderVisible"
          append-to-body>
          <div>
            <!-- 订单编号，商品名称，数量，单价，总额，订单状态 -->
            <el-table
              :data="orderTable"
              :cell-style="{textAlign:'center'}"
              :header-cell-style="{textAlign:'center'}"
              style="width: 100%;"
              empty-text="无"
              v-loading="orderLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading">
              <el-table-column
                prop="orderId"
                label="订单编号"
                width="300px"
                sortable="true">
              </el-table-column>
              <el-table-column
                prop="productName"
                label="商品名称"
                sortable="true"
                width="150px">
              </el-table-column>
              <el-table-column
                prop="productNum"
                label="数量"
                sortable="true"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="productPrice"
                label="单价"
                sortable="true"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="phone"
                label="总额"
                sortable="true"
                width="120px">
                <template slot-scope="scope">
                  {{ scope.row.productPrice * scope.row.productNum }}
                </template>
              </el-table-column>
              <el-table-column
                prop="orderStatus"
                label="订单状态"
                sortable="true"
                width="100px">
              </el-table-column>
            </el-table>
          </div>
        </el-dialog>
        <h1>客户: {{ customer.customerName }}</h1>
        <el-descriptions class="margin-top" title="客户信息" :column="3" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="showOrderTable">展示订单</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              客户编号
            </template>
            {{ customer.customerId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ customer.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-phone"></i>
              座机
            </template>
            {{ customer.landline }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              公司名
            </template>
            {{ customer.employer }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-truck"></i>
              送货地址
            </template>
            {{ customer.address }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>

    <div>
      <el-table
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column
          prop="customerId"
          label="客户编号"
          width="150px"
          sortable="true"
          text-align: center>
          <template slot-scope="scope">
            <el-button @click="customerInfo(scope.row)" type="text" size="small">{{ scope.row.customerId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户姓名"
          sortable="true"
          width="170px">
        </el-table-column>
        <el-table-column
          prop="employer"
          label="公司名"
          sortable="true"
          width="190px">
        </el-table-column>
        <el-table-column
          prop="landline"
          label="座机"
          sortable="true"
          width="160px">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="客户电话"
          sortable="true"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="cardId"
          label="身份证号"
          sortable="true"
          width="250px">
        </el-table-column>
        <el-table-column label="操作" sortable="true">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary" round
              @click="edit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="primary" round
              @click="showDelete(scope.row)">删除客户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 8, 10]"
        :total=totalNum
        :page-size="pageSize"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </el-main>


</template>

<script>

import axios, {get} from 'axios';
import {cities} from '../assets/city.js';

export default {
  name: 'Delivery_order',
  data() {
    return {
      target: '',
      customerInfoVisible: false,
      orderVisible: false,
      createCustomerVisible: false,
      editCustomerVisible: false,
      deleteCustomerVisible: false,
      formLabelWidth: '100px',
      address1: [],
      address2: '',
      editAddress1: [],
      editAddress2: '',
      customer: {},
      orderTable: [],
      deleteCustomer: {
        customerId: '',
        customerName: ''
      },
      editCustomer: {
        customerName: '',
        address: '',
        employer: '',
        cardId: '',
        phone: '',
        landline: '',
        email: '',
        postalCode: ''
      },
      newCustomer: {
        customerName: '',
        address: '',
        employer: '',
        cardId: '',
        phone: '',
        landline: '',
        email: '',
        postalCode: ''
      },
      city: cities,
      tableData: [{
        customerId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
        customerName: "xxxxxxx",
        employer: "xxxxxxxxxxx",
        landline: "xxxxxxxxx",
        phone: "xxxxxxxxxxxxx",
        cardId: "xxxxxxxxxxxxxxxxxxxxxx"
      }, {
        customerId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
        customerName: "xxxxxxx",
        employer: "xxxxxxxxxxx",
        landline: "xxxxxxxxx",
        phone: "xxxxxxxxxxxxx",
        cardId: "xxxxxxxxxxxxxxxxxxxxxx"
      }, {
        customerId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
        customerName: "xxxxxxx",
        employer: "xxxxxxxxxxx",
        landline: "xxxxxxxxx",
        phone: "xxxxxxxxxxxxx",
        cardId: "xxxxxxxxxxxxxxxxxxxxxx"
      }],
      currentPage: 1,
      pageSize: 5,
      totalNum: 1,
      loading: false,
      orderLoading: false,
      options: [{
        value: 0,
        label: '-'
      }, {
        value: 1,
        label: '客户姓名'
      }, {
        value: 2,
        label: '客户身份证'
      }, {
        value: 3,
        label: '客户电话号码'
      }],
      value: 0
    }
  },
  methods: {
    getAll(Cp) {
      this.loading = true
      let data = {
        currentPage: Cp,
        pageSize: this.pageSize
      }
      axios.post('http://localhost:8085/customer/getByCondition', data
      ).then(res => {
        const httpCode = res.data.code
        if (httpCode === 1) {
          this.tableData = res.data.data
          this.totalNum = res.data.map.totalNum
          this.loading = false
        } else {
          this.$message.error('系统错误')
          this.loading = false
        }
      })
    },

    // getByPage(){
    //    this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
    //    console.log("asdsad"+this.tableData);
    //  },
    // value===1?'请输入客户姓名':value===2?'请输入客户身份证':value===3?'请输入客户电话':'(⊙﹏⊙)'
    getDetail(Cp, model) {
      this.loading = true;
      switch (this.value) {
        case 0:
          // model === true时是查询，model === false，是改变页数
          if (model) {
            alert("请先选择想要查询的信息！")
            this.loading = false
          } else {
            this.getAll(Cp)
          }
          break;
        case 1:
          var data = {
            currentPage: Cp,
            pageSize: this.pageSize,
            customerName: this.target
          }
          axios.post('http://localhost:8085/customer/getByCondition', data
          ).then(res => {
            const httpCode = res.data.code
            if (httpCode === 1) {
              this.tableData = res.data.data
              this.totalNum = res.data.map.totalNum
              this.loading = false
            } else {
              this.$message.error('系统错误')
              this.loading = false
            }
          })
          break;
        case 2:
          var data = {
            currentPage: Cp,
            pageSize: this.pageSize,
            cardId: this.target
          }
          axios.post('http://localhost:8085/customer/getByCondition', data
          ).then(res => {
            const httpCode = res.data.code
            if (httpCode === 1) {
              this.tableData = res.data.data
              this.totalNum = res.data.map.totalNum
              this.loading = false
            } else {
              this.$message.error('系统错误')
              this.loading = false
            }
          })
          break;
        case 3:
          var data = {
            currentPage: Cp,
            pageSize: this.pageSize,
            phone: this.target
          }
          axios.post('http://localhost:8085/customer/getByCondition', data
          ).then(res => {
            const httpCode = res.data.code
            if (httpCode === 1) {
              this.tableData = res.data.data
              this.totalNum = res.data.map.totalNum
              this.loading = false
            } else {
              this.$message.error('系统错误')
              this.loading = false
            }
          })
          break;
      }
    },

    showOrderTable() {
      this.orderVisible = true
      this.orderLoading = true
      axios.post('http://localhost:8085/order/record/' + this.customer.customerName
      ).then(res => {
        const httpCode = res.data.code
        if (httpCode === 1) {
          this.orderTable = res.data.data.order
          this.orderLoading = false
        } else {
          this.$message.error('系统错误')
          this.orderLoading = false
        }
      })
    },

    //上色功能，目前不知道为什么用不了，先放一放
    Dye({row, rowIndex}) {
      if (rowIndex == 1) {
        return 'success-row';
        // alert(row.orderStatus);
      } else if (row.orderStatus == "缺货") {
        return 'quehuo';
        // alert(row.orderStatus);
      }
      return '';
      // alert(row.orderStatus);
    },

    updateCustomer() {
      if (!(this.editAddress1.length === 0 && this.editAddress2 === '')) {

        if (this.editAddress1.length === 0) {
          this.$message.error('请选择配送至的区县')
          return
        }
        if (this.editAddress2 === '') {
          this.$message.error('请输入详细地址')
          return
        }
        this.editCustomer.address = this.editAddress1.slice(0, this.editAddress1.length).join('') + this.editAddress2
        this.editAddress1=[]
        this.editAddress2=''
      }
      axios.post('http://localhost:8085/customer/update', this.editCustomer).then((res) => {
        const code = res.data.code
        if (code === 1) {
          this.$message.success("修改成功")
          this.getAll(this.currentPage)
          this.editCustomerVisible = false
        }
      }).catch((error) => {
        console.error(error);
      });
    },

    edit(customer) {
      this.editCustomer = customer
      this.editCustomerVisible = true
    },

    showDelete(customer) {
      this.deleteCustomer.customerId = customer.customerId
      this.deleteCustomer.customerName = customer.customerName
      this.deleteCustomerVisible = true
    },

    deleteCustomerMethod() {
      axios.post('http://localhost:8085/order/hasOrderRecord/' + this.deleteCustomer.customerName).then((res) => {
        const code = res.data.code
        console.log(code === 1)
        if (code === 1) {
          console.log(res.data.data)
          if (!res.data.data) {
            axios.post('http://localhost:8085/customer/remove',
              {
                customer_id: this.deleteCustomer.customerId
              }
            ).then(res => {
              const httpCode = res.data.code
              if (httpCode === 1) {
                this.$message.success("成功移除")
                this.getAll(this.currentPage)
                this.deleteCustomerVisible = false
              } else {
                this.$message.error(res.data.msg)
              }
            })
          } else {
            this.$message.error('该客户还有订单不能删除')
          }
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch((error) => {
        console.error(error);
      })
    },

    showCreate() {
      this.createCustomerVisible = true
    },

    addCustomer() {
      if (this.newCustomer.customerName === '') {
        this.$message.error('请填写客户名')
        return
      }
      if (this.address1.slice(0, 2).join('') === '') {
        this.$message.error('请选择配送至的区县')
        return
      }
      if (this.address2 === '') {
        this.$message.error('请输入详细地址')
        return
      }
      if (this.newCustomer.employer === '') {
        this.$message.error("请填写所属公司")
        return
      }
      if (this.newCustomer.cardId === '') {
        this.$message.error("请填写身份证")
        return
      }
      if (this.newCustomer.phone === '') {
        this.$message.error('请填写电话')
        return
      }
      if (this.newCustomer.landline === '') {
        this.$message.error('请填写座机')
        return
      }
      if (this.newCustomer.email === '') {
        this.$message.error('请填写邮箱')
        return
      }
      if (this.newCustomer.postalCode === '') {
        this.$message.error('请填写邮编')
        return
      }
      this.newCustomer.address = this.address1.slice(0, this.address1.length).join('') + this.address2
      axios.post('http://localhost:8085/customer/add', this.newCustomer).then((res) => {
        const code = res.data.code
        if (code === 1) {
          this.$message.success("添加成功")
          this.getAll(this.currentPage)
          this.createCustomerVisible = false
          this.newCustomer = {
            customerName: '',
            address: '',
            employer: '',
            cardId: '',
            phone: '',
            landline: '',
            email: '',
            postalCode: '',
          }
          this.address1=''
          this.address2=''
        }
      }).catch((error) => {
        console.error(error);
      });
    },

    customerInfo(customer) {
      this.customerInfoVisible = true
      this.customer = customer
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getDetail(1, false);
      console.log(this.tableData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getDetail(this.currentPage, false);
      console.log(this.tableData);
      // console.log(this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize));
    }

  },
  mounted() {
    // this.loading=true;
    this.getAll(1)
    //
    // this.getByPage()
  }

}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>

